---
import { Tabs, TabItem, Code } from '@astrojs/starlight/components'
const { pkg, dev } = Astro.props
---

<Tabs syncKey={`pkg-${pkg}`} class:list={["list-style-none p-0 m-0"]}>
  <TabItem label="npm" icon="seti:npm">
    <Code lang="sh" code={`npm install ${pkg}${dev ? "--save-dev" : ""}`} />
  </TabItem>
  <TabItem label="pnpm" icon="pnpm">
    <Code lang="sh" code={`pnpm install ${pkg} ${dev ? "--save-dev" : ""}`} />
  </TabItem>
  <TabItem label="Yarn" icon="seti:yarn">
    <Code lang="sh" code={`yarn add ${pkg} ${dev ? "--dev" : ""}`} />
  </TabItem>
</Tabs>

<style scoped>
  ul,
  li {
    list-style: none;
    padding: 0;
  }
</style>
